import { defineComponent, ref } from 'vue'
import './index.scss'
import classNames from 'classnames'
import CpNavBar from '@/components/CpNavBar'
import { Icon, Form, Field, Checkbox, Divider, Button, showToast, showSuccessToast } from 'vant'
import QqSvg from '@/assets/qq.svg'
import { mobileRules, passwordRules } from '@/utils/rules'
import { loginByPassword } from '@/services/user'
import { useUserStore } from '@/stores'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  name: 'CpLogin',
  props: {},
  emits: [],
  setup() {
    const router = useRouter()
    const route = useRoute()
    const userStore = useUserStore()

    const mobile = ref<string>('13230000056')
    const password = ref<string>('abc12345')
    const isShow = ref<boolean>(false)
    const agree = ref<boolean>(true)
    const isPassword = ref<boolean>(true)

    // 提交表单
    const login = async () => {
      if (!agree.value) {
        return showToast('请勾选我已同意')
      }
      //验证完毕,进行登录
      const res = await loginByPassword(mobile.value, password.value)
      console.log(res.data)
      userStore.setUser(res.data)
      // 如果有回跳地址就进行回跳, 没有跳转到个人中心
      router.push((route.query.returnUrl as string) || '/user')
      showSuccessToast('登录成功')
    }

    return () => (
      <>
        <div class={classNames('login-page')}>
          <CpNavBar title="登录" rightText="注册"></CpNavBar>
          {/* 头部 start */}
          <div class={classNames('login-head')}>
            <h3>{isPassword.value ? '密码登录' : '验证码登录'}</h3>
            <a
              href="javascript:;"
              onClick={() => {
                isPassword.value = !isPassword.value
              }}
            >
              <span>{!isPassword.value ? '密码登录' : '验证码登录'}</span>
              <Icon name="arrow"></Icon>
            </a>
          </div>
          {/* 头部 end */}

          {/* 表单 start*/}
          <Form onSubmit={() => login()}>
            <Field
              modelValue={mobile.value}
              onUpdate:model-value={(newValue: string) => {
                mobile.value = newValue
              }}
              placeholder="请输入手机号"
              type="tel"
              rules={mobileRules}
            ></Field>
            <Field
              modelValue={password.value}
              onUpdate:model-value={(newValue: string) => {
                password.value = newValue
              }}
              placeholder="请输入密码"
              type={isShow.value ? 'text' : 'password'}
              rules={passwordRules}
            ></Field>
            <div class={classNames('cp-cell')}>
              <Checkbox
                modelValue={agree.value}
                onUpdate:model-value={(newValue: boolean) => (agree.value = newValue)}
              >
                <span>我已同意</span>
                <a href="javascript:;">用户协议</a>
                <span>及</span>
                <a href="javascript:;">隐私条款</a>
              </Checkbox>
            </div>
            <div class="cp-cell">
              <Button block round type="primary" nativeType="submit">
                登 录
              </Button>
            </div>
            <div class="cp-cell">
              <a href="javascript:;">忘记密码？</a>
            </div>
            {/* 底部 start */}
            <div class="login-other">
              <Divider>第三方登录</Divider>
              <div class="icon">
                <img src={QqSvg} alt="" />
              </div>
            </div>
            {/* 底部 end */}
          </Form>
          {/* 表单 end*/}
        </div>
      </>
    )
  }
})
